<template>
  <div id="home">
    <nav-bar class="home-nav">
      <template v-slot:center>购物街</template>
    </nav-bar>
    <TabControl :title="['流行','新款','精选']" 
        class="tab-control" 
        @tabclick='tabclick'
        ref="TabControl1"
        v-show="isfixed"
        
      />
    
    <Scroll class="content" ref="scroll" :isprobe-type="3" 
            @scrollcontent="scrollcontent"
            :pull-up-load="true"
            @pullingUpContent="pullingUpContent">
      <home-swiper :banner="banner" @swiperImgload="swiperImgload"/>
      <Recommend :recommend="recommend"/>
      <FeatureView/>
      <TabControl :title="['流行','新款','精选']" 
        class="tab-control" 
        @tabclick='tabclick'
        ref="TabControl2"
      />
      <goods-list  :goodslist="showgoods"></goods-list>
      
    </Scroll>
    <BackTop @click.native="backtopClick" v-show="isshowbacktop"/>
    
  </div>
</template>

<script>
//views小组件
import HomeSwiper from './childrenhome/HomeSwiper'
import Recommend from './childrenhome/Recommend'
import FeatureView from './childrenhome/FeatureView'
// 公共组件content
import NavBar from "@/components/common/navbar/NavBar";
import TabControl from '@/components/content/tabcontrol/TabControl'
import GoodsList from '@/components/content/goods/GoodList'
import Scroll from '@/components/common/scroll/Scroll'
import BackTop from '@/components/content/backtop//BackTop'
//方法
import { getHomeMultidata,getHomeGoods } from "@/networks/home";

export default {
  name: "Home",
  components: {
    
    HomeSwiper,
    Recommend,
    FeatureView,

    NavBar,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,

  },
  data: function() {
    return {
      // 保存请求来的数据
      banner: [],
      recommend:[],
      goods:{
        //设计数据结构，并保存
        'pop':{'page':0,list:[]},
        'new':{'page':0,list:[]},
        'sell':{'page':0,list:[]},
      },
      currentType:'pop',
      isshowbacktop:false,
      tabOffsetTop:586,
      isfixed:false,
      saveY:0,
      itemImageListener:null,
    };
  },
  computed:{
    showgoods:function(){
      return this.goods[this.currentType].list

    }
  },
  //  destroyed() {
  //   console.log("xiaohui")
  // },
  //离开时保存页面滚动距离
  activated() {
    this.$refs.scroll.refresh();
    this.$refs.scroll.scrollToTop(0,this.saveY,0);
    
  },
  deactivated() {
    this.saveY=this.$refs.scroll.scrollY();
    //离开后取消监听事件
    this.$bus.$off("itemImgLoad",this.itemImageListener);

  },
  //首页创建好就发送请求
  created() {
    //请求banner数据
    this.getHomeMultidata();
    //请求goods数据
    this.getHomeGoods('pop');
    this.getHomeGoods('new');
    this.getHomeGoods('sell');
   
  },
  mounted() {
    const refresh= this.debounce(this.$refs.scroll.refresh,100);
    this.itemImageListener=()=>{
      //但是刷新频率太高，这里用防抖减少刷新频率
      refresh();
      
    }
      //监听图片加载事件 注意：在create里不能监听获取dom 和组件事件，很有可能是空
    this.$bus.$on("itemImgLoad",this.itemImageListener)
  },
 
  methods: {
    // 1 请求多个数据
    getHomeMultidata:function(){
      getHomeMultidata().then(res => {
      // console.log("homemultidata"+res);
      //将数据保存起来，否则函数调用完没有引用指向对象，对象将会被回收
      //this 指向组件对象
      this.banner = res.data.banner.list;
      this.recommend= res.data.recommend.list;
    });
    },
    // 根据数据类型请求数据
    getHomeGoods:function(type){
      //拿到数据
      const currentPage= this.goods[type].page+1;
      getHomeGoods(type,currentPage).then(res=>{
        //取出数据后保存
        // this.goods[type].list.push(...res.data[type].list);
        for (let n of res.data.list){
          this.goods[type].list.push(n);
        }
        // console.log("1234",this.goods[type].list);
        //将页码加一
        this.goods[type].page+=1;
      });
      
    },
    // 防抖动
    debounce(fn,delay){
      let timer=null;
      return function(...args){
        //注意这里的this最终会被vue实例调用，所以指向vue实例
        //如果有timer,清除，没有就加上
        if(timer) clearTimeout(timer);
        timer=setTimeout(()=>{
          //appy作用：1将settimeout里面的this-指向上衣级return function() 的this就是vue实例与fn window绑定,
          // 2 传递参数给fn调用
          fn.apply(this,args)
        },delay)

      }

    },
   

    //2事件监听相关方法
  //从tabcontrol拿到点击的index
    tabclick:function(index){
      
      switch(index){
        case 0:
          this.currentType='pop';
          break;
        case 1:
          this.currentType='new';
          break;
        case 2:
          this.currentType='sell'
      }
      // 让两个tabcontrol的index保持同步
      this.$refs.TabControl1.currentIndex=index;
      this.$refs.TabControl2.currentIndex=index;

    },
    backtopClick:function(){
      //拿到scroll组件对象，然后拿到scroll滚动对象 
      //返回顶部
      this.$refs.scroll.scrollToTop(0,0,500);
    },
    scrollcontent:function(position){
      //判断backtop是否显示
      this.isshowbacktop=(-position.y)>1000;
      //判断tabcontrol是否fixed
      this.isfixed=(-position.y)>this.tabOffsetTop;
    },
    pullingUpContent:function(){
      //根据当前活跃页请求数据
      this.getHomeGoods(this.currentType);
      this.$refs.scroll.finishPullUp();
      
    },
    //轮播图图片加载完成后
    swiperImgload:function(){
      console.log("tabcontrol ",this.$refs.TabControl2.$el.offsetTop);
    }
   



  },
};
</script>


<style scoped>
#home{
  height: 100vh;
  /* padding-top: 44px; */
}
.home-nav {
  background-color: var(--color-tint);
  /* position:fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2; */
}
  .tab-control{
    position: sticky;
    top:44px;
  }
  

 .content{
   height: calc(100% - 50px);
   overflow: hidden;
 }
 .fixed{
    position:fixed;
    left: 0;
    right: 0;
    top: 0;
 }
</style>